<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="./lib/element-ui@2.15.4.css">
  <script src="./lib/vue.min.2.7.14.js"></script>
  <script src="./lib/element-ui@2.15.14.js"></script>
  <script src="./lib/echarts.min.5.0.2.js"></script>
  <script src="./lib/axios.min.js"></script>
  <script src="./utils/genPieOption.js"></script>
  <script src="./utils/genBarOption.js"></script>
  <script src="./utils/genBar1Option.js"></script>

  <style>
    .active {
      color: #3561FD;
    }
  </style>
</head>

<body>
  <div id="app">
    <my-pie key="1"></my-pie>
    <my-bar></my-bar>
  </div>
  <script>
    Vue.component('empty', {
      template:
        `<div>
               empty
          </div>
            `,
      data() {
        return {
        }
      },
      methods: {
        async getDate(type) {
          const r = await axios.request({
            method: 'get',
            url: ' http://localhost:1237/' + type
          })
          this.PieDataList[type] = r.data
        },
      },
      beforeCreate() {
        this.myChart = null
      },
      watch: {

      },


      async mounted() {
      },
      beforeDestory() { }

    })

    Vue.component('my-pie', {
      template:
        `<div>
                <el-radio-group v-model="radio">
                  <el-radio-button @change.native="change($event,item)"  v-for="(item,index) in list" :key="item" :label="item"></el-radio-button>
                </el-radio-group>
                <div style="width: 560px;height: 220px;border:1px solid red;" ref="pieBoxRef"></div></div>
            `,
      data() {
        return {
          list: ['本周', '本月', '本季度', '本年'],
          radio: '本周',
          currentIndex: -1,
          PieDataList: [[], [], [], []],
          dispatchActionDuration: 5000 * 100

        }
      },
      methods: {
        async getDate(type) {
          const r = await axios.request({
            method: 'get',
            url: ' http://localhost:1237/' + type
          })
          this.PieDataList[type] = Object.freeze(r.data)
        },
        updateRadio() {
          this.currentIndex = (this.currentIndex + 1) % this.list.length;
          //没有数据就去发送请求数据 ，有数据就不用发送请求
          if (this.PieDataList[this.currentIndex].length === 0) this.getDate(this.currentIndex).then(_ => this.updatePie())
          else this.updatePie()
          this.radio = this.list[this.currentIndex]

        },
        updatePie() {
          if (!this.myChar) {
            this.myChart = echarts.init(this.$refs.pieBoxRef);
            this.echartPieAnimationInstance = new EchartPieAnimation(this.myChart)
          }
          const option = genPieOption(this.PieDataList[this.currentIndex])
          this.myChart.setOption(option);
          this.echartPieAnimationInstance.highlight(() => {
            this.updateRadio()
          })
        },
        //手动切换
        change(event, item) {
          const index = this.list.findIndex(v => v === item)
          this.echartPieAnimationInstance.abortHighlight()
           this.currentIndex=index-1
           this.updateRadio()
        }

      },
      beforeCreate() {
        this.myChart = null
        this.echartPieAnimationInstance = null
      },

      async mounted() {
        this.updateRadio()
      },
      beforeDestory() {
        this.myChar && this.myChart.dispose()
      }

    })
    Vue.component('my-bar', {
      template:
        `<div style="display: grid;grid-template: 315px/108px 1fr;background-color: #EBEDF2;">
            <div class="type1" style="padding: 16px 0;display:grid;grid-template: repeat(5,1fr)/1fr;">
              <div v-for="(item,index) in type1List" :key="index" @click="type1Change(item)" :class="item===type1?'active':''" style="cursor: pointer;background-color:#fff;display:flex;align-items:center;justify-content: center;"> {{ item }}</div>
            </div>
            <div class="right" style="background-color:#fff;padding:16px 16px 0 16px;display:grid; grid-template:auto 1fr/1fr auto;">
              <el-radio-group  v-model="type2"><el-radio-button @change.native="typeChange($event,item)"  v-for="(item,index) in type2List" :key="index" :label="item"></el-radio-button></el-radio-group>
              <!-- aaaaaa -->
              <el-radio-group v-model="type3"><el-radio-button @change.native="typeChange($event,item)" v-for="(item,index) in type3List" v-show="type1!=='综合得分'||(type1==='综合得分'&&item==='本年')" :key="index" :label="item"></el-radio-button></el-radio-group>
              <div style="grid-column: 1/-1;grid-row: 2/-1;" ref="bar1BoxRef"></div>
            </div>
      </div>
            `,
      data() {
        return {
          type1List: ['综合得分', '参与单位', '参与作业', '违章处罚', '安全事件'],
          type2List: ['按区域', '按专业'],
          type3List: ['本周', '本月', '本季度', '本年'],
          type1: '综合得分',
          type2: '按区域',
          type3: '本年',//aaaaaa
          data: [],
          currentIndex: 0,
          paramsList: [],
          cacheParamsDataList: [],
          timer: null

        }
      },
      methods: {
        setParamsList() {
          //综合得分->只能是本年
          this.paramsList.push([0, 0, 3], [0, 1, 3]) //aaaaaa
          this.cacheParamsDataList.push([], [])
          for (let i = 1; i < this.type1List.length; i++) {
            for (let j = 0; j < this.type2List.length; j++) {
              for (let k = 0; k < this.type3List.length; k++) {
                this.paramsList.push([i, j, k])
                this.cacheParamsDataList.push([])
              }
            }
          }

        },
        getCurrentIndex() {
          const type1Index = this.type1List.findIndex(item => item === this.type1)
          const type2Index = this.type2List.findIndex(item => item === this.type2)
          //aaaaaa
          let type3Index = this.type3List.findIndex(item => item === this.type3)
          //aaaaaa
          if (type1Index === 0) {
            if (type3Index !== 3) type3Index = 3
            this.type3 = this.type3List[type3Index]
          }

          this.currentIndex = this.paramsList.findIndex(item => item[0] === type1Index && item[1] === type2Index && item[2] === type3Index)

        },
        async getDate(params) {
          console.log('this.currentIndex', this.currentIndex)
          const [type1, type2, type3] = this.paramsList[this.currentIndex]
          const currentCacheData = this.cacheParamsDataList[this.currentIndex]
          if (currentCacheData.length) return this.data = currentCacheData[0]
          const r = await axios.request({
            method: 'get',
            url: `http://localhost:1237/bar?type1=${type1}&type2=${type2}&type3=${type3}`
          })
          const t = Object.freeze(r.data[0])
          this.data = t
          this.cacheParamsDataList[this.currentIndex].push(t)
        },
        updateBar() {
          if (!this.myChar) {
            this.myChart = echarts.init(this.$refs.bar1BoxRef)
          }
          const option = genBar1Option(this.data)
          this.myChart.clear()
          this.myChart.setOption(option);
        },
        updateRadioHighLight() {
          const [type1Index, type2Index, type3Index] = this.paramsList[this.currentIndex]
          this.type1 = this.type1List[type1Index]
          this.type2 = this.type2List[type2Index]
          this.type3 = this.type3List[type3Index]

        },
        //数据轮播
        carousel() {
          this.timer = setInterval(async () => {
            this.currentIndex = (this.currentIndex + 1) % this.paramsList.length
            this.updateRadioHighLight()
            await this.getDate()
            this.updateBar()
          }, 5000 * 100)
        },
        abortCarousel() {
          clearInterval(this.timer)
          this.timer = null
        },
        //手动触发点击按钮 type1List数组
        type1Change(item) {
          this.type1 = item
          this.typeChange()
        },
        //手动触发点击按钮  type2List数组 type3List数组
        async typeChange() {
          //手动点击
          this.abortCarousel() //终止正在轮播循环
          this.getCurrentIndex()//获取索引
          await this.getDate() //根据索引获取数据
          this.updateBar() //根据数据更新图表
          this.carousel() //开启新一轮循环
        }

      },
      beforeCreate() {
        this.myChart = null
      },
      async mounted() {
        this.setParamsList() //设置参数列表集合
        this.getCurrentIndex() //获取当前索引
        await this.getDate() //根据索引获取数据
        this.updateBar() //根据数据更新图表

        this.carousel() //开始轮播

      },
      watch: {


      },
      beforeDestory() {
        clearInterval(this.timer)
        this.timer = null
        this.cacheParamsDataList = []
      }

    })




    new Vue({
      el: '#app',
      data: function () {
        return {


        }
      },


    })
  </script>

</body>

</html>